<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div class="container-body">
    <!--header头部-->
    <el-row :gutter="20">
      <el-col :span="24">
        <p-header></p-header>
      </el-col>
    </el-row>

    <el-row>
      <!--左部分-->
      <el-col :span="4">
        <div v-if="!pageArr" class="container" style="height: 61vh">
          <div class="container-title top-margin a-height">
            <p class="null-data-container-content white-txt">No Data!</p>
          </div>
        </div>

        <!--<div v-else class="container" style="height: 560px">-->
        <div v-else class="container" style="height: 71vh">
          <div class="container-title top-margin"
               v-bind:class="{ 'middle-height': ismiddle, 'a-height': ismax }">
            <div class="radius cursor-pointer" @click="opposite(index)" :class="{ orange:changeRed == index}"
                 v-for="(page, index) in pageArr"
                 :key="index">
              {{page.title}}
              <i class="el-icon-success"></i>
            </div>
          </div>

          <!--    <div v-if="nNum > 0" class="container-title top-margin"
                   v-bind:class="{ 'middle-height': ismiddle, 'b-height': ismax }">
                <div class="radius cursor-pointer" @click="opposite(index,page)"
                     :class="{ orange:changeRed == index}"
                     v-for="(page,index) in pageArr"
                     :key="index" v-if="page.emotion==1">
                  {{page.title}}
                  <i class="el-icon-warning"></i>
                </div>
              </div>-->
        </div>
      </el-col>
      <!--右部分-->
      <el-col :span="20">
        <div v-if="!pageArr" class="container" style="height: 58vh">
          <div class="div-bdcolor top-margin radius white-txt null-data-container-content">
            <p class="white-txt">No Data!</p>
          </div>
        </div>


        <!--<div v-else class="container" style="height: 550px">-->
        <div v-else class="container" style="height: 68vh">
          <el-radio-group style="position: absolute;left: 18%;top: -10px" v-show="false" v-model="curren_order_index">
            <el-radio :label="-1" disabled>自定义</el-radio>
            <el-radio v-if="!isfixt" v-for="(item,index) in orderby" :key="index" :label="index">模板{{index+1}}
            </el-radio>

          </el-radio-group>
          <el-input placeholder="新标题"
                    size="small"
                    v-model="titleText"
                    style="height: 7%;font-size: 16px;"
          ></el-input>

          <!--<div v-if="!isEdit" @click="editText(pageObj.content)"-->
          <!--class="container-content-text padding-txt cursor-pointer white-txt"-->
          <!--v-html="pageObj.content"></div>-->
          <vue-editor v-if="isEdit" style="height: 95%;margin-top: 4px;padding-left: 0px !important;"
                      class="container-content-editor padding-txt editor-ui"
                      v-model="editorContent"></vue-editor>
          <div v-if="isEdit" class="container-content-btn container-content-edit">
            <div class="container-content-btn-margin cursor-pointer" style="color: black" @click="cancelText">取消</div>
            <div class="container-content-btn-margin cursor-pointer" style="color: black" @click="saveText">保存</div>
          </div>


          <div v-else id="doc" style="height: 92%;overflow-y: auto; background: #46484b;;padding: 10px;margin: 2px 0;">
            <transition-group tag="div">

              <div v-for="(item,index) in reportArr" :key="index"
                   draggable="true"
                   @dragstart="handleDragStart($event, item)"
                   @dragover.prevent="handleDragOver($event, item)"
                   @dragenter="handleDragEnter($event, item,index)"
                   @dragend="handleDragEnd($event, item)"
                   @click="editText(item)"
                   class="div-bdcolor top-margin radius container-content cursor-pointer draggable">

                <!-- 板块 -->
                <div v-html="item.block"></div>
                <!-- 内容 -->
                <div :title="item.block_str" class="container-content-text padding-txt cursor-pointer white-txt"
                     v-html="item.content"></div>
              </div>
            </transition-group>
          </div>

        </div>

      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div style="width: 100%;text-align: center;padding-top: 6px;">
          <div>
            <el-button @click="back" style="margin: 0 5px;">返回</el-button>
            <!--<el-button @click="exportReport" type="primary">导出业绩报</el-button>-->
            <el-popover
              placement="top"
              width="160"
              v-model="visible2">
              <p>确定导出业绩报"{{titleText}}"?</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
                <el-button type="primary" size="mini" @click="exportReport">确定</el-button>
              </div>
              <el-button style="margin: 0 5px;" slot="reference" type="primary">导出业绩报</el-button>
            </el-popover>
          </div>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import {VueEditor} from "vue2-editor";
import {Button, Card, Input} from 'element-ui';
import axios from "axios";
import Header from "../../components/common/header";
import '../../views/utils/js/jquery-3.2.1.min.js';
import '../../views/utils/js/FileSaver.js';
import '../../views/utils/js/jquery.wordexport.js';

var self = null;

export default {
  name: "preview",
  components: {
    pHeader: Header,
    VueEditor: VueEditor,
    elButton: Button,
    elCard: Card,
    pHeader: Header,
    elInput: Input,
  },
  data() {
    return {
      visible2: false,  //导出业绩报按钮弹出提示框
      curr_doc_id: 0,
      isDebug: false,
      ismiddle: false,
      ismax: false,
      isEdit: false,
      requestData: null, //公共参数
      report: {},
      isfixt: false,
      orderby: [],
      curren_order: [],
      curren_order_index: -1,
      pageArr: [],
      reportArr: [],
      pageObj: {
        id: null,
        emotion: null,
        title: null,
        report: {
          yjzs: null,
          khjy: null,
          hxyw: null
        },
        content: null
      },
      changeRed: 0,
      taValue: 123123123123123123,
      oNum: 0,
      nNum: 0,
      titleText: null,
      editorContent: '',
      loading: null,
    }
  },
  mounted: function () {
    let isDebug = self.isDebug;
    console.log("create_report", self.requestData);
    let mess;
    if (isDebug) {
      self.pageArr = [{
        "id": 1,
        "emotion": 0,
        "title": "",
        // "report": {
        //   "业绩综述": "      中国平安交出的“成绩单”可圈可点、超出预期——截止2017年12月31日，中国平安实现归属于母公司股东的净利润为89088.0百万元，同比增加42.78%。并向股民派发“大红包”，得益于营运利润的快速增长，中国平安提升现金分红水平，全年向股东派发每股股息每股现金1.5元，同比上浮100.00%<br/><br/>      近年来，中国平安始终坚持以个人客户为中心，持续提升传统金融渠道和互联网渠道的服务能力。中国平安的个人客户数为16573.0万人，较2016年的13100.0万人增大26.51%。2017年，中国平安实现客均合同数为2.32份，与去年同期相比提升4.98%。中国平安的持有多家子公司合同的客户数为4723.0万人，较2016年的3150.0万人增大49.94%。",
        //   "主力业务": "      从寿险及健康险业务的业绩数据可以看出：在大环境比较好的情况下，代理人首年规模保费得到了提升。从保单继续率来看，截止2017年12月31日中国平安寿险的13个月保单继续率同比上浮0.4个百分点至91.8%,截止2017年末中国平安寿险的25个月保单继续率同比增加1.5个百分点至88.0%。寿险投资方面，收益也不错，截止2017年12月31日，中国平安的总投资收益率为6.1%，较上一年的5.3%增长0.8个百分点，净投资收益率为5.8%，较上一年同期下滑0.2个百分点，。<br/><br/>      从财产保险业务的业绩数据可以看出：产险业务方面，坚持以客户为中心的经营模式，截止2017年末，中国平安实现原保险保费收入为215984.0百万元，同比上升21.40%，其中，产险的车险保费收入为170508.0百万元，较上一年的148501.0百万元增加14.82%；产险的非机动车险保险保费收入为38929.0百万元，较上一年的24452.0百万元增大59.21%。综合成本率是体现经营管理效率的重要指标，截止2017年12月31日，中国平安综合成本率为96.2%，同比有所上升，这是因为公司正在开拓新的业务，所以综合成本率有所增加，这属于正常现象。<br/><br/>      报告数据显示，贷款质量方面，平安银行积极应对外部风险，将贷款投放到资产质量更好的业务，对公持续做精，保持资产质量稳定。截止2017年末，中国平安银行业务实现不良贷款率为1.7%，同比减少0.04个百分点；拨备覆盖率同比下降4.29个百分点至151.08%。平安银行继续推进零售转型，全力打造以“SAT(社交+移动+远程服务)”为核心的智能化零售银行。同时，建立敏捷机制和垂直化管控协调体系，提升零售组织运转效率。在智能化零售银行的策略引领下，2017年，银行业务实现零售业务营业收入为46692.0百万元，同比增长41.72%；零售业务营业收入占比为44.1%，较上一年同期增长13.5个百分点；银行业务的零售业务净利润为15679.0百万元，较上一年的9315.0百万元提升68.32%；零售客户数量为6991.0万人，与去年同期相比上升33.44%。",
        //   "主力业务1": "      从寿险及健康险业务的业绩数据可以看出：在大环境比较好的情况下，代理人首年规模保费得到了提升。从保单继续率来看，截止2017年12月31日中国平安寿险的13个月保单继续率同比上浮0.4个百分点至91.8%,截止2017年末中国平安寿险的25个月保单继续率同比增加1.5个百分点至88.0%。寿险投资方面，收益也不错，截止2017年12月31日，中国平安的总投资收益率为6.1%，较上一年的5.3%增长0.8个百分点，净投资收益率为5.8%，较上一年同期下滑0.2个百分点，。<br/><br/>      从财产保险业务的业绩数据可以看出：产险业务方面，坚持以客户为中心的经营模式，截止2017年末，中国平安实现原保险保费收入为215984.0百万元，同比上升21.40%，其中，产险的车险保费收入为170508.0百万元，较上一年的148501.0百万元增加14.82%；产险的非机动车险保险保费收入为38929.0百万元，较上一年的24452.0百万元增大59.21%。综合成本率是体现经营管理效率的重要指标，截止2017年12月31日，中国平安综合成本率为96.2%，同比有所上升，这是因为公司正在开拓新的业务，所以综合成本率有所增加，这属于正常现象。<br/><br/>      报告数据显示，贷款质量方面，平安银行积极应对外部风险，将贷款投放到资产质量更好的业务，对公持续做精，保持资产质量稳定。截止2017年末，中国平安银行业务实现不良贷款率为1.7%，同比减少0.04个百分点；拨备覆盖率同比下降4.29个百分点至151.08%。平安银行继续推进零售转型，全力打造以“SAT(社交+移动+远程服务)”为核心的智能化零售银行。同时，建立敏捷机制和垂直化管控协调体系，提升零售组织运转效率。在智能化零售银行的策略引领下，2017年，银行业务实现零售业务营业收入为46692.0百万元，同比增长41.72%；零售业务营业收入占比为44.1%，较上一年同期增长13.5个百分点；银行业务的零售业务净利润为15679.0百万元，较上一年的9315.0百万元提升68.32%；零售客户数量为6991.0万人，与去年同期相比上升33.44%。",
        //   "主力业务2": "      从寿险及健康险业务的业绩数据可以看出：在大环境比较好的情况下，代理人首年规模保费得到了提升。从保单继续率来看，截止2017年12月31日中国平安寿险的13个月保单继续率同比上浮0.4个百分点至91.8%,截止2017年末中国平安寿险的25个月保单继续率同比增加1.5个百分点至88.0%。寿险投资方面，收益也不错，截止2017年12月31日，中国平安的总投资收益率为6.1%，较上一年的5.3%增长0.8个百分点，净投资收益率为5.8%，较上一年同期下滑0.2个百分点，。<br/><br/>      从财产保险业务的业绩数据可以看出：产险业务方面，坚持以客户为中心的经营模式，截止2017年末，中国平安实现原保险保费收入为215984.0百万元，同比上升21.40%，其中，产险的车险保费收入为170508.0百万元，较上一年的148501.0百万元增加14.82%；产险的非机动车险保险保费收入为38929.0百万元，较上一年的24452.0百万元增大59.21%。综合成本率是体现经营管理效率的重要指标，截止2017年12月31日，中国平安综合成本率为96.2%，同比有所上升，这是因为公司正在开拓新的业务，所以综合成本率有所增加，这属于正常现象。<br/><br/>      报告数据显示，贷款质量方面，平安银行积极应对外部风险，将贷款投放到资产质量更好的业务，对公持续做精，保持资产质量稳定。截止2017年末，中国平安银行业务实现不良贷款率为1.7%，同比减少0.04个百分点；拨备覆盖率同比下降4.29个百分点至151.08%。平安银行继续推进零售转型，全力打造以“SAT(社交+移动+远程服务)”为核心的智能化零售银行。同时，建立敏捷机制和垂直化管控协调体系，提升零售组织运转效率。在智能化零售银行的策略引领下，2017年，银行业务实现零售业务营业收入为46692.0百万元，同比增长41.72%；零售业务营业收入占比为44.1%，较上一年同期增长13.5个百分点；银行业务的零售业务净利润为15679.0百万元，较上一年的9315.0百万元提升68.32%；零售客户数量为6991.0万人，与去年同期相比上升33.44%。",
        // },
        orderby: [
          ['块1', "块2", "块3", "块4", "块5"],
          ['块2', "块1", "块3", "块4", "块5"],
          ['块3', "块2", "块1", "块4", "块5"],
        ],
        isfixt: null,
        curren_order_index: -1,
        curren_order: null,
        curren_order_map: null,
        "report": {
          "块1": "      1中国平安交出的“成绩单”可圈可点、超出预期——截止2017年12月31日，中国平安实现归属于母公司股东的净利润为89088.0百万元，同比增加42.78%。并向股民派发“大红包”，得益于营运利润的快速增长，中国平安提升现金分红水平，全年向股东派发每股股息每股现金1.5元，同比上浮100.00%<br/><br/>      近年来，中国平安始终坚持以个人客户为中心，持续提升传统金融渠道和互联网渠道的服务能力。中国平安的个人客户数为16573.0万人，较2016年的13100.0万人增大26.51%。2017年，中国平安实现客均合同数为2.32份，与去年同期相比提升4.98%。中国平安的持有多家子公司合同的客户数为4723.0万人，较2016年的3150.0万人增大49.94%。",
          "块2": "      2从寿险及健康险业务的业绩数据可以看出：在大环境比较好的情况下，代理人首年规模保费得到了提升。从保单继续率来看，截止2017年12月31日中国平安寿险的13个月保单继续率同比上浮0.4个百分点至91.8%,截止2017年末中国平安寿险的25个月保单继续率同比增加1.5个百分点至88.0%。寿险投资方面，收益也不错，截止2017年12月31日，中国平安的总投资收益率为6.1%，较上一年的5.3%增长0.8个百分点，净投资收益率为5.8%，较上一年同期下滑0.2个百分点，。<br/><br/>      从财产保险业务的业绩数据可以看出：产险业务方面，坚持以客户为中心的经营模式，截止2017年末，中国平安实现原保险保费收入为215984.0百万元，同比上升21.40%，其中，产险的车险保费收入为170508.0百万元，较上一年的148501.0百万元增加14.82%；产险的非机动车险保险保费收入为38929.0百万元，较上一年的24452.0百万元增大59.21%。综合成本率是体现经营管理效率的重要指标，截止2017年12月31日，中国平安综合成本率为96.2%，同比有所上升，这是因为公司正在开拓新的业务，所以综合成本率有所增加，这属于正常现象。<br/><br/>      报告数据显示，贷款质量方面，平安银行积极应对外部风险，将贷款投放到资产质量更好的业务，对公持续做精，保持资产质量稳定。截止2017年末，中国平安银行业务实现不良贷款率为1.7%，同比减少0.04个百分点；拨备覆盖率同比下降4.29个百分点至151.08%。平安银行继续推进零售转型，全力打造以“SAT(社交+移动+远程服务)”为核心的智能化零售银行。同时，建立敏捷机制和垂直化管控协调体系，提升零售组织运转效率。在智能化零售银行的策略引领下，2017年，银行业务实现零售业务营业收入为46692.0百万元，同比增长41.72%；零售业务营业收入占比为44.1%，较上一年同期增长13.5个百分点；银行业务的零售业务净利润为15679.0百万元，较上一年的9315.0百万元提升68.32%；零售客户数量为6991.0万人，与去年同期相比上升33.44%。",
          "块3": "      3从寿险及健康险业务的业绩数据可以看出：在大环境比较好的情况下，代理人首年规模保费得到了提升。从保单继续率来看，截止2017年12月31日中国平安寿险的13个月保单继续率同比上浮0.4个百分点至91.8%,截止2017年末中国平安寿险的25个月保单继续率同比增加1.5个百分点至88.0%。寿险投资方面，收益也不错，截止2017年12月31日，中国平安的总投资收益率为6.1%，较上一年的5.3%增长0.8个百分点，净投资收益率为5.8%，较上一年同期下滑0.2个百分点，。<br/><br/>      从财产保险业务的业绩数据可以看出：产险业务方面，坚持以客户为中心的经营模式，截止2017年末，中国平安实现原保险保费收入为215984.0百万元，同比上升21.40%，其中，产险的车险保费收入为170508.0百万元，较上一年的148501.0百万元增加14.82%；产险的非机动车险保险保费收入为38929.0百万元，较上一年的24452.0百万元增大59.21%。综合成本率是体现经营管理效率的重要指标，截止2017年12月31日，中国平安综合成本率为96.2%，同比有所上升，这是因为公司正在开拓新的业务，所以综合成本率有所增加，这属于正常现象。<br/><br/>      报告数据显示，贷款质量方面，平安银行积极应对外部风险，将贷款投放到资产质量更好的业务，对公持续做精，保持资产质量稳定。截止2017年末，中国平安银行业务实现不良贷款率为1.7%，同比减少0.04个百分点；拨备覆盖率同比下降4.29个百分点至151.08%。平安银行继续推进零售转型，全力打造以“SAT(社交+移动+远程服务)”为核心的智能化零售银行。同时，建立敏捷机制和垂直化管控协调体系，提升零售组织运转效率。在智能化零售银行的策略引领下，2017年，银行业务实现零售业务营业收入为46692.0百万元，同比增长41.72%；零售业务营业收入占比为44.1%，较上一年同期增长13.5个百分点；银行业务的零售业务净利润为15679.0百万元，较上一年的9315.0百万元提升68.32%；零售客户数量为6991.0万人，与去年同期相比上升33.44%。",
          "块4": "      4从寿险及健康险业务的业绩数据可以看出：在大环境比较好的情况下，代理人首年规模保费得到了提升。从保单继续率来看，截止2017年12月31日中国平安寿险的13个月保单继续率同比上浮0.4个百分点至91.8%,截止2017年末中国平安寿险的25个月保单继续率同比增加1.5个百分点至88.0%。寿险投资方面，收益也不错，截止2017年12月31日，中国平安的总投资收益率为6.1%，较上一年的5.3%增长0.8个百分点，净投资收益率为5.8%，较上一年同期下滑0.2个百分点，。<br/><br/>      从财产保险业务的业绩数据可以看出：产险业务方面，坚持以客户为中心的经营模式，截止2017年末，中国平安实现原保险保费收入为215984.0百万元，同比上升21.40%，其中，产险的车险保费收入为170508.0百万元，较上一年的148501.0百万元增加14.82%；产险的非机动车险保险保费收入为38929.0百万元，较上一年的24452.0百万元增大59.21%。综合成本率是体现经营管理效率的重要指标，截止2017年12月31日，中国平安综合成本率为96.2%，同比有所上升，这是因为公司正在开拓新的业务，所以综合成本率有所增加，这属于正常现象。<br/><br/>      报告数据显示，贷款质量方面，平安银行积极应对外部风险，将贷款投放到资产质量更好的业务，对公持续做精，保持资产质量稳定。截止2017年末，中国平安银行业务实现不良贷款率为1.7%，同比减少0.04个百分点；拨备覆盖率同比下降4.29个百分点至151.08%。平安银行继续推进零售转型，全力打造以“SAT(社交+移动+远程服务)”为核心的智能化零售银行。同时，建立敏捷机制和垂直化管控协调体系，提升零售组织运转效率。在智能化零售银行的策略引领下，2017年，银行业务实现零售业务营业收入为46692.0百万元，同比增长41.72%；零售业务营业收入占比为44.1%，较上一年同期增长13.5个百分点；银行业务的零售业务净利润为15679.0百万元，较上一年的9315.0百万元提升68.32%；零售客户数量为6991.0万人，与去年同期相比上升33.44%。",
          "块5": "      5从寿险及健康险业务的业绩数据可以看出：在大环境比较好的情况下，代理人首年规模保费得到了提升。从保单继续率来看，截止2017年12月31日中国平安寿险的13个月保单继续率同比上浮0.4个百分点至91.8%,截止2017年末中国平安寿险的25个月保单继续率同比增加1.5个百分点至88.0%。寿险投资方面，收益也不错，截止2017年12月31日，中国平安的总投资收益率为6.1%，较上一年的5.3%增长0.8个百分点，净投资收益率为5.8%，较上一年同期下滑0.2个百分点，。<br/><br/>      从财产保险业务的业绩数据可以看出：产险业务方面，坚持以客户为中心的经营模式，截止2017年末，中国平安实现原保险保费收入为215984.0百万元，同比上升21.40%，其中，产险的车险保费收入为170508.0百万元，较上一年的148501.0百万元增加14.82%；产险的非机动车险保险保费收入为38929.0百万元，较上一年的24452.0百万元增大59.21%。综合成本率是体现经营管理效率的重要指标，截止2017年12月31日，中国平安综合成本率为96.2%，同比有所上升，这是因为公司正在开拓新的业务，所以综合成本率有所增加，这属于正常现象。<br/><br/>      报告数据显示，贷款质量方面，平安银行积极应对外部风险，将贷款投放到资产质量更好的业务，对公持续做精，保持资产质量稳定。截止2017年末，中国平安银行业务实现不良贷款率为1.7%，同比减少0.04个百分点；拨备覆盖率同比下降4.29个百分点至151.08%。平安银行继续推进零售转型，全力打造以“SAT(社交+移动+远程服务)”为核心的智能化零售银行。同时，建立敏捷机制和垂直化管控协调体系，提升零售组织运转效率。在智能化零售银行的策略引领下，2017年，银行业务实现零售业务营业收入为46692.0百万元，同比增长41.72%；零售业务营业收入占比为44.1%，较上一年同期增长13.5个百分点；银行业务的零售业务净利润为15679.0百万元，较上一年的9315.0百万元提升68.32%；零售客户数量为6991.0万人，与去年同期相比上升33.44%。",
        },
      },
        {
          "id": 1,
          "emotion": 1,
          "title": "",
          orderby: [
            ['块1', "块2", "块3", "块4", "块5"],
            ['块2', "块1", "块3", "块4", "块5"],
            ['块3', "块2", "块1", "块4", "块5"],
          ],
          "report": {
            "块1": "      中国平安日前发布了2017的全年业绩报告。从发布的报告中可以看到，2017年，中国平安实现归属于母公司股东的净利润为89088.0百万元，同比增长42.78%，中国平安的归属于母公司股东的权益为473351.0百万元，较2016年的383449.0百万元上升23.45%；中国平安业绩持续稳定增长。此外，截止2017年12月31日，中国平安的集团内含价值为825173.0百万元，较上一年的637703.0百万元上浮29.40%。",
            "块2": "      寿险及健康险业务方面，寿险方面，寿险秉承“保险姓保”理念，聚焦“产品+”战略，延伸寿险产品边界，寿险业务价值和规模持续快速增长，截止2017年12月31日，寿险实现新业务价值为67357.0百万元，同比增大32.58%。在大环境比较好的情况下，代理人首年规模保费得到了提升。寿险方面我们取得了优异的业绩，2017年，中国平安寿险实现保费收入为388642.0百万元，同比上浮33.43%，截止2017年末，中国平安实现代理人渠道新业务规模保费为136657.0百万元，与去年同期相比增大34.46%，在保单继续率上，寿险实现13个月保单继续率为91.8%，与去年同期相比增长0.4个百分点,25个月保单继续率为88.0%，与去年同期相比提升1.5个百分点。截止2017年12月31日，寿险的总投资收益率为6.1%，同比提升0.8个百分点，寿险实现净投资收益率为5.8%，同比下降0.2个百分点，所以寿险投资方面，也有不错的收益。<br/><br/>      从财产保险业务的业绩数据可以看出：截止2017年末，中国平安产险的综合成本率为96.2%，同比上升0.3，主要受益于良好的公司管理及风险筛选能力。<br/><br/>      银行业务方面，平安银行严格管控增量业务风险，并对存量贷款进行全面排查、有序化解。2017年，中国平安银行业务的拨备覆盖率为151.08%，较上一年同期下降4.29个百分点；截止2017年末，中国平安的不良贷款率为1.7%，与去年同期相比下滑0.04个百分点。平安银行零售业务表现亮眼，零售战略转型下银行的资产负债结构、收益结构等已经发生显著的变化，未来将会继续贯彻零售策略，截止2017年12月31日，中国平安的零售业务营业收入为46692.0百万元，较上一年的32947.0百万元上浮41.72%；零售业务营业收入占比为44.1%，与去年同期相比增大13.5个百分点；零售业务净利润为15679.0百万元，与去年同期相比提升68.32%；零售客户数量为6991.0万人，较上一年的5239.0万人增长33.44%。<br/><br/>      从金融科技与医疗科技业务的业绩数据可以看出：据报告数据显示，陆金所控股继续保持快速发展。截至2017年末，资产管理规模达4616.99亿元，较年初增长5.3%；管理贷款余额2884.34亿元，较年初增长96.7%；首次实现全年整体盈利。平安好医生此前完成Pre-IPO融资，融资金额为4亿美元，并向香港联交所递交了A1申请表格。截至2017年末，平安好医生累计为超1.9亿用户提供健康管理服务。平安好医生自有医疗团队888人，外部医生约2100名。健康商城可为用户提供7*24小时的1小时药品快递服务，覆盖北上广深等全国14个城市。",
          }
        },
        {
          "id": 1,
          "emotion": 0,
          "title": "",
          orderby: [
            ['块1', "块2", "块3", "块4", "块5"],
            ['块2', "块1", "块3", "块4", "块5"],
            ['块3', "块2", "块1", "块4", "块5"],
          ],
          "report": {
            "块1": "      中国平安日前发布了2017的全年业绩报告。从发布的报告中可以看到，截止2017年12月31日，中国平安实现归属于母公司股东的净利润为89088.0百万元，同比上浮42.78%，2017年，中国平安实现归属于母公司股东的权益为473351.0百万元，同比提升23.45%；中国平安业绩持续稳定增长。此外，2017年，中国平安实现集团内含价值为825173.0百万元，同比上升29.40%。<br/><br/>      近年来，中国平安始终坚持以个人客户为中心，持续提升传统金融渠道和互联网渠道的服务能力。截止2017年12月31日，中国平安实现个人客户数为16573.0万人，与去年同期相比上浮26.51%。截止2017年12月31日，中国平安的客均利润为355.85元，较上一年的311.51元提升14.23%。截止2017年12月31日，中国平安实现客均合同数为2.32份，与去年同期相比提升4.98%。截止2017年末，中国平安的持有多家子公司合同的客户数占比为28.5%，与去年同期相比上升4.5个百分点。",
          }
        }]
      if (self.pageArr) {
        self.getlength(self.pageArr);
      }

      for (var i in self.pageArr) {
        let index = (parseInt(i) + 1)
        if (self.pageArr[i].title == '' || self.pageArr[i].title) {
          self.pageArr[i].title = '文章' + index;
        }
      }
    } else {
      self.loading = self.$openFullScreenLoading(self);
      axios
        .get(self.$URLOBJ.CREATEREPORTURL, {
          params: self.requestData
        })
        .then(res => {
            console.log(res);
            if (res.data.respcode != 0) {
              mess = `${res.data.respmesg}`;
              self.$warnMessage(mess);
              return;
            }
            if (res.data.results.length > 0) {
              self.pageArr = res.data.results;
              if (self.pageArr) {
                self.getlength(self.pageArr);
              }
              for (var i in self.pageArr) {
                let index = (parseInt(i) + 1)
                if (self.pageArr[i].title == '' || self.pageArr[i].title) {
                  self.pageArr[i].title = '文章' + index;
                }
              }
              console.log("pageArr <<<<", self.pageArr);
            }
            self.$closeFullScerenLoading(self.loading);
          }
        )
        .catch(err => {
          mess = ` ${err.message}`;
          self.$closeFullScerenLoading(self.loading);
          self.$errorMessage(mess);
        });
    }
    self.initData();
  },

  //页面初始化
  created: function () {
    self = this;
    let currentData = self.$route.query.commonParam;  //获取上一页的请求数据
    if (currentData && currentData != {} && currentData != null) {
      sessionStorage.setItem("requestData", JSON.stringify(currentData));
    } else {
      currentData = JSON.parse(sessionStorage.getItem("requestData")); //刷新获取历史请求数据
    }
    self.requestData = currentData;
  },
  methods: {
    initData() {
    },
    handleDragStart(e, item) {
      self.dragging = item;
    },
    handleDragEnd(e, item) {
      self.dragging = null
      console.info("handleDragEnd");
      self.curren_order_index = -1;
    },
    //首先把div变成可以放置的元素，即重写dragenter/dragover
    handleDragOver(e) {

      e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
    },
    handleDragEnter(e, item, index) {
      e.dataTransfer.effectAllowed = "move"//为需要移动的元素设置dragstart事件
      if (item === self.dragging) {
        return
      }
      const newItems = [...self.reportArr]
      console.log('handleDragEnter', newItems)
      const src = newItems.indexOf(self.dragging)
      const dst = newItems.indexOf(item)

      newItems.splice(dst, 0, ...newItems.splice(src, 1))

      self.reportArr = newItems

      let curren_order = [];
      let temp_report_map = {};
      for (let i = 0; i < newItems.length; i++) {
        let tempblock = self.$parseDom(newItems[i].block)[0].parentNode.innerText;

        curren_order.push(tempblock)
        temp_report_map[tempblock] = newItems[i].content;

      }
      console.info(">>>>>>>>", curren_order)
      self.curren_order = curren_order;
      // console.log("数据源",newItems)
      self.pageArr[self.curr_doc_id].curren_order_index = -1;
      self.pageArr[self.curr_doc_id].curren_order = curren_order;
      self.pageArr[self.curr_doc_id].report = temp_report_map;
      self.pageArr[self.curr_doc_id].isfixt = self.isfixt;

    },
    // y = "<p class='p-block'>业绩综述</p>" +
    // content += y + '<br/><br/><br/>';
    reContent(object) {
      var block = ''
      var content = '';
      var reportObj = object.report;
      if (reportObj) {
        for (var i in reportObj) {
          block = "<p class='p-block'>" + i + ":" + "</p>";
          // content += block + reportObj[i] + '<br/><br/>';
          content += block + reportObj[i];
        }
      }
      /* if (!i) {
         content += '无内容'
       }*/
      return content;
    },
    getlength(arr) {
      console.log("getlength()")
      var a = 0, b = 0;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].emotion == 0) {
          a += 1;
          if (!arr[i].title) {
            arr[i].title = "正面-" + a;
          }
        } else {
          b += 1;
          if (!arr[i].title) {
            arr[i].title = "反面-" + b;
          }
        }
      }
      self.oNum = a;
      self.nNum = b;
      if (self.oNum > 0 && self.nNum <= 0) {
        self.ismiddle = false;
        self.ismax = true;
      } else if (self.nNum > 0 && self.oNum <= 0) {
        self.ismiddle = false;
        self.ismax = true;
      } else {
        self.ismiddle = true;
        self.ismax = false;
      }
    },
    cancelText() {
      self.isEdit = false;
      self.pageObj.content = localStorage.getItem("oldContent");
    },
    saveText() {
      (self.pageArr[self.curr_doc_id])["isfixt"] = true;
      self.isfixt = true;
      self.curren_order_index = -1;
      let temp_report_map = {};
      let temp_report = [];
      let temp_report_item = null;
      let next_block = null;
      let last_block = "";
      let last_content = "";
      const c_list = self.$parseDom(self.editorContent);
      let tem_obj = null;
      for (let i = 0; i < c_list.length + 1; i++) {
        if (i < c_list.length) {
          tem_obj = c_list[i];
        }
        if (tem_obj.nodeName === "P" && i < c_list.length) {//Content
          if (tem_obj.innerText.trim().length > 0) {
            last_content += tem_obj.innerHTML;
          }
        } else {//block
          if (last_content != null && last_content.trim().length > 0
            || last_block.trim().toString() > 0) {
            temp_report_item = {
              block: last_block.trim().toString(),
              content: last_content.trim().toString()
            }
            temp_report.push(temp_report_item);
            temp_report_map[self.$parseDom(temp_report_item.block)[0].parentNode.innerText] = temp_report_item.content
            //重置一个新版块开始状态
            last_content = "";
          }
          last_block = tem_obj.outerHTML;
        }

      }

      console.info(c_list);

      //save
      self.pageArr[self.curr_doc_id].report = temp_report_map;
      self.pageArr[self.curr_doc_id].curren_order = self.curren_order;
      self.pageArr[self.curr_doc_id].isfixt = self.isfixt;
      self.pageArr[self.curr_doc_id].curren_order_index = self.curren_order_index;
      console.info("temp_report_map ?>>>", self.pageArr[self.curr_doc_id].report);
      console.info("curren_order ?>>>", self.pageArr[self.curr_doc_id].curren_order);
      //ok
      self.reportArr = temp_report;
      self.isEdit = false;

      //false
      // alert('保存失败')
    },
    editText(val) {
      console.log("editText()", val);
      self.isEdit = true;
      let content = ''
      self.reportArr.forEach(p => {
        content += '<h4 class="p-block">' + p.block + '</h4><p class="p-content">' + p.content + '</p><!---->'
      })
      console.log('editor content', content)
      self.editorContent = content
      localStorage.setItem("oldContent", val);
    },
    hideEdit() { //不显示编辑器
      self.isEdit = false;
      self.isEdit_hxyw = false;
      self.isEdit_khjy = false;
    },
    opposite(index, page) {

      self.isEdit = false;
      self.titleText = self.pageArr[index].title;


      self.curren_order = (self.pageArr[index])['curren_order'];

      self.orderby = self.pageArr[index].orderby;

      self.isfixt = self.pageArr[index].isfixt;

      if (!self.curren_order) {
        self.curren_order = self.pageArr[index].orderby[0]
      }

      if (self.pageArr[index].curren_order_index != null) {
        self.curren_order_index = self.pageArr[index].curren_order_index;
      } else {
        self.curren_order_index = -1
      }

      console.log("opposite()", self.curren_order);
      self.changeRed = index;
      self.curr_doc_id = index;

      self.report = self.pageArr[index].report;

    },
    back() {
      console.log("back()");
      self.$router.go(-1); // 返回上一层
    },
    exportReport() {
      // let mess = "暂未提供该功能...";
      // self.$warnMessage(mess);
      self.visible2 = false;
      $('#doc').wordExport(self.titleText, self.titleText);
      Message.success("业绩报" + "\"" + self.titleText + "\"" + "导出成功");
    },
    start: function () {
      console.log("start()");
    }
  },

  watch: {
    curren_order_index() {
      if (self.curren_order_index > -1) {
        let newItems = [];
        let temp_report = self.pageArr[self.curr_doc_id].report;
        let temp_order = self.pageArr[self.curr_doc_id].orderby[self.curren_order_index];
        let temp_block;
        let temp_content;
        for (let i = 0; i < temp_order.length; i++) {
          temp_block = temp_order[i];
          temp_content = temp_report[temp_block]

          temp_content = temp_content ? temp_content : "";

          newItems.push({
            block: "<h4 class='p-block'>" + temp_block.trim().toString() + "</h4>",
            block_str: temp_block.trim().toString(),
            content: temp_content.trim().toString()
          })
        }


        self.reportArr = newItems;


        console.info(">>>>>>>>", temp_order)
        self.curren_order = temp_order;
        // console.log("数据源",newItems)
        self.pageArr[self.curr_doc_id].curren_order = temp_order;
        self.pageArr[self.curr_doc_id].curren_order_index = self.curren_order_index;

      }
    },
    titleText() {
      self.pageArr[self.curr_doc_id].title = self.titleText;
    },
    report() {
      let reportArr = []
      let block, content;

      if (!self.curren_order) {
        self.curren_order = self.pageArr[0].orderby[0]
      }

      console.log("curren_order 》》》》", self.curren_order);

      for (let i = 0; i < self.curren_order.length; i++) {
        block = self.curren_order[i];
        content = self.report[block];
        if (content) {
          content = content.toString()
        } else {
          content = ""
        }
        reportArr.push({
          block: '<h4 class="p-block">' + block + '</h4>',
          block_str: block.trim().toString(),
          content: content
        })

      }
      self.reportArr = reportArr;
    },


    pageArr() {
      if (self.pageArr.length > 0) {
        self.titleText = self.pageArr[0].title;
        self.curren_order = self.pageArr[0].orderby[0]
        self.orderby = self.pageArr[0].orderby;
        self.report = self.pageArr[0].report;
      }
    },
  },

  destroyed() {
    let self = this;
    console.log("destroyed")
    self.$closeMessage();
    self.$closeFullScerenLoading(self.loading);
  }
}


</script>

<style>
  @import "./css/preview.css";
</style>
